
* {
	margin: 0;
	padding: 0;
}
body {
	text-align: center;
	padding: 10px;
}
.phone {
	display: inline-block;
	overflow: hidden;
	width: 318px;
	height: 560px;
	border: 1px solid;
	border-radius: 5px;
	box-shadow: -5px 5px 5px #CCC, 5px 5px 5px #CCC;
}
.msg_text {
	width: 318px;
	height: 126px;
}
.msg_input_text {
	float: left;
	width: 234px;
	height: 110px;
	padding: 7px;
	border: none;
}
.msg_input_submit {
	float: left;
	width: 68px;
	height: 126px;
	border: none;
}
.msg {
	overflow-x: hidden;
	overflow-y: scroll;
	width: 304px;
	height: 420px;
	padding: 7px;
}
.msg_left {
	width: 287px;
	height: auto;
}
.show_user, .show_msg {
	display: inline-block;
}
.show_user {
	width: 50px;
	height: 50px;
	border-radius: 50px;
	background: #EEE;
	font-size: 35px;
	line-height: 45px;
}
.show_msg {
	width: 229px;
	min-height: 50px;
	/*background: #CC6;*/
}
.show_text {
	padding: 7px;
	/*width: 205px;*/
	/*min-height: 36px;*/
	max-width: 201px;
	min-height: 32px;
	border: 2px solid #333;
	border-radius: 10px;
	text-align: left;
}
.msg_left .show_user, .msg_left .show_text {
	float: left;
}
.msg_left .show_msg:before {
	display: inline-block;
	float: left;
	width: 0;
	height: 0;
	margin-top: 20px;
	border: 5px solid #000;
	border-color: transparent #333 transparent transparent;
	content: "";
}
.msg_right .show_user, .msg_right .show_text {
	float: right;
}
.msg_right .show_user {
	margin-right: 7px;
}
.msg_right .show_msg:before {
	display: inline-block;
	float: right;
	width: 0;
	height: 0;
	margin-top: 20px;
	border: 5px solid #000;
	border-color: transparent transparent transparent #333;
	content: "";
}
@media screen and (max-width: 600px) {
	.phone {
		max-width: 600px;
		border: none;
		box-shadow: none;
	}
	.msg {
		height: auto;
		overflow-y: hidden;
	}
}